<!-- 组织-职位管理-职位管理-职业发展通道 -->
<template>
  <div class="wrap">
    <a-table
      style="width: 98%; margin: 10px; height: 550px"
      :span-method="dataSpanMethod"
      :columns="columns.data"
      :data="data.data"
      :scroll="{ x: 1000, y: 1000 }"
      :pagination="false"
      :stripe="true"
    >
      <template #customize="{ record, column }">
        <!-- <a-input
          @change="edit($event, record, column)"
          :disabled="record.disabled"
          :default-value="showTableData(record, column)"
        ></a-input> -->
        <!-- <div style="height: 1em; width: 1em"> -->
        {{ showTableData(record, column) }}
        <!-- </div> -->
        <!-- <a-input
          disabled
          :default-value="showTableData(record, column)"
        ></a-input> -->
        <!-- {{ showTableData(record, column) }} -->
        <!-- <a-input
          @press-enter="edit($event, record, column)"
          @blur="edit($event, record, column)"
          disabled
          :default-value="showTableData(record, column)"
        ></a-input> -->
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { matrixData } from '../matrix';
import {
  PutPositionDevelopment,
  PostPositionDevelopment
} from '@/apis/management/organization/baseSetting/PositionSystem/index';
const props = withDefaults(
  //参数说明
  defineProps<{
    columnsData: any;
    datas: any;
    tableDatas: any;
  }>(),
  { columnsData: () => [], datas: () => [], tableDatas: () => [] }
);
const columns = reactive({ data: [] });
const data = reactive({ data: [] });

watch(
  () => props.columnsData,
  () => {
    const { columns: newColumns, data: newData } = matrixData(
      props.columnsData,
      props.datas,
      props.tableDatas,
      2
    );

    columns.data = newColumns;
    data.data = newData;
  }
);

const { dataSpanMethod, showTableData } = matrixData();

//编辑表格数据
const edit = async (editData: any, record: any, column: any) => {
  if (!editData) return;
  if (record[column.dataIndex]?.id) {
    await PutPositionDevelopment({
      id: record[column.dataIndex].id,
      dataIndex: column.dataIndex,
      level: record.rank,
      value: editData
    });
  } else {
    await PostPositionDevelopment({
      dataIndex: column.dataIndex,
      level: record.rank,
      value: editData
    });
  }
};
</script>

<style lang="less" scoped>
.wrap {
  padding: 10px 20px;
  display: flex;
  width: 100%;
}
:deep(.arco-spin) {
  // border-right: 1px solid #e4e4e4;
}
:deep(.arco-input-wrapper) {
  border: none;
  text-align: center;
  background-color: transparent;
}
:deep(.arco-input) {
  text-align: center;
}
</style>
